<template>
  <div class="operation-log">
    <vxe-table border :loading="pageLoading" height="95%" :scroll-y="{ enabled: true, gt: 30 }" :row-config="{ isHover: true }" :data="tableData">
      <vxe-column type="seq" width="50"></vxe-column>
      <vxe-column field="orderNum" title="订单号" min-width="160"></vxe-column>
      <vxe-column field="operation" title="操作内容" min-width="180"></vxe-column>
      <vxe-column field="operationBefore" title="操作前" min-width="180"></vxe-column>
      <vxe-column field="operationAfter" title="操作后" min-width="180"></vxe-column>
      <vxe-column field="updateName" title="操作人" min-width="90"></vxe-column>
      <vxe-column field="updateTime" title="操作时间" min-width="135">
        <template #default="{ row }">
          {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script lang="ts" setup>
import { statementLogApi } from "@/api/financialManagement/receivable/statement";
import dayjs from "dayjs";
import { ref, toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WaterVerification.ListRows[];
  }>(),
  {}
);
const { visible, passData } = toRefs(props);
const tableData = ref<Array<Base.GeneraDataType>>([]);
const pageLoading = ref<boolean>(false);
const initData = () => {
  pageLoading.value = true;
  return statementLogApi({
    orderNums: passData.value.map((t: any) => t.orderNum),
    type: 3,
    businessIdList: passData.value.map((t: any) => t.id)
  })
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data || [];
      }
    })
    .finally(() => {
      pageLoading.value = false;
    });
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) initData();
  }
);
initData();
</script>
<style lang="stylus" scoped>
.operation-log{
  box-sizing: border-box;
  height: calc(100vh - 90px);
  background-color: #fff;
  padding: 12px;
}
</style>
